<template>
  <div style="width: 95%;margin: 15px auto; border: 1px solid #CFD8DC">
    <div>
      <div style="height: 45px;line-height: 45px; border-bottom: 1px solid #CFD8DC;background-color: #ECEFF1">
        <div style="margin-left: 20px;font-weight: 1000">班级消课</div>
      </div>
      <div style="padding-top: 30px;">
        <el-form style="margin: 18px;" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="所属校区" prop="schoolId">
            <el-select size="small" v-model="schoolId" placeholder="请选择所属校区" clearable
                       :style="{width: '100%'}">

              <el-option v-for="(item, index) in schoolIdOptions" :key="index" :label="item.schoolName"
                         :value="item.schoolId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="small" label="所在班级" prop="teacherId">
            <el-select v-model="queryParams.classId" placeholder="请选择班级" clearable :style="{width: '100%'}">
              <el-option label="全部班级" value=""></el-option>
              <el-option v-for="(item, index) in classIdOptions"
                         :key="index"
                         :label="item.className"
                         :value="item.classId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryParams">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="classStuData.length>0">
        <el-table :data="classStuData">
          <el-table-column width="165" label="班级编号" align="center" prop="classNumber"></el-table-column>
          <el-table-column width="165" label="班级名称" align="center" prop="className"/>
          <el-table-column width="165" label="上课时间" align="center" prop="classTime"/>
          <el-table-column label="学生人数" align="center" prop="stuCount">
            <template slot-scope="scope">
              <span>{{ scope.row.stuCount + '人' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否消课" align="center" prop="attendance">
            <template slot-scope="scope">
              <span v-if="scope.row.attendance==0" style="color: red;">未消课</span>
              <span v-if="scope.row.attendance==1" style="color: green;">已消课</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.attendance==0"
                size="mini"
                type="text"
                icon="el-icon-close"
                @click="classAttendance(scope.row)"
                v-hasPermi="['school:class:edit']"
              >消课
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>
import {getSchoolAll,} from "../../../api/school/school";
import {getSchoolForClass, getSchoolClassStudent,classAttendance} from "../../../api/school/class";

export default {
  name: "classAttendance",
  data() {
    return {
      queryParams: {
        schoolId: '',
        classId: ''

      },
      schoolId: '',
      schoolIdOptions: [],
      classIdOptions: [],
      classStuData: []

    }
  },
  created() {
    this.getSchoolAllData();
  },
  watch: {
    schoolId(schoolId) {
      this.queryParams.classId = '';
      this.queryParams.schoolId = schoolId;
      this.classIdOptions = [];
      this.classStuData=[];
      if (this.queryParams.schoolId !== '') {
        this.getSchoolForClassData();
        this.handleQuery();
      }
    }
  },
  methods: {
    handleQuery() {
      if (this.queryParams.schoolId=='' || this.queryParams.schoolId==null){
        this.msgError("请选择校区");
      }else{
        getSchoolClassStudent(this.queryParams).then(res => {
          if (res.code === 200) {
            this.classStuData = res.data;
          }
        })
      }
    },
    classAttendance(row){
      let classId = row.classId;
      this.$confirm(`确认消除 '${row.className}' 的课时吗？`)
        .then(_ => {
          classAttendance(classId).then(res=>{
            this.msgSuccess("消课成功的学生人数:"+res.data.updateSuccessCount)
            this.handleQuery();
          })
        })
        .catch(_ => {});
    },
    resetQueryParams() {
      this.queryParams.schoolId = '';
      this.queryParams.classId = '';
      this.schoolId = ''
      this.classStuData=[]
    },
    getSchoolAllData() {
      getSchoolAll().then(res => {
        if (res.code === 200) {
          this.schoolIdOptions = res.data;
          this.schoolId = this.schoolIdOptions[0].schoolId;
        }
      })
    },
    getSchoolForClassData() {
      getSchoolForClass(this.schoolId).then(res => {
        if (res.code === 200) {
          this.classIdOptions = res.data;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
